// ===首页样式===

// 引入全站通用重置样式
//@import '../../../common/less/reset.less';
@import '../../../common/less/function.less';
//// 前台www站点公共头脚
//@import '../../common/less/header.less';
//@import '../../common/less/footer.less';
// 邓元翔的模块封装库
@import '../../../common/less/deng_module.less';
// fullPage.js插件的菜单样式修改
@import '../common/less/fullPageDIY.less';

// 宋体
@SimSun :"\5B8B\4F53";
// 微软雅黑
@YaHei : "\5FAE\8F6F\96C5\9ED1", @SimSun;

// 白色字体
.f-cl-wt{
    color: white;
}

body{
    background-color: white;
}
/*头部导航*/
.g-hd{
    .f-pf;
}

/*脚部导航*/
.g-ft{
    position: absolute;
    bottom: 0;
}

.m-page2,.m-page3,.m-page4,.m-page5{
    display: none;
}

.m-page1,.m-page2,.m-page3,.m-page4,.m-page5 {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/*——————屏幕1——————*/
.m-page1{
    
    h2,span{
        text-align: center;
    }
    
    .m-bd{
        padding: 0 75px;
    }
    
    .m-tt{
        width: 430px;
        height: 352px;
        position: absolute;
        left: 76px;
        top: 15%;
        
        h2{
            font: normal 56px @YaHei;
        }
        span{
            font-size: 30px;
            font: normal 30px @YaHei;
            display: block;
            margin-bottom: 60px;
        }
    }
    
    /*下载模块*/
    .m-download{
        @_h:177px;
        width: 423px;
        height: @_h;
        .block_center;
        overflow: hidden;
        
        i,span{
            .inline_block;
        }
        
        .m-btn{
            float: left;
        }
        .u-android{
            margin-bottom: 37px;
        }
        
        a{
            border: 1px solid white;
            width: 206px;
            height: 68px;
            display: block;
            border-radius: 5px;
            
            &:hover{
                background: #F96A52;
            }
        }
        span{
            font-size: 16px;
            line-height: 68px;
        }
        img{
            height: @_h;
            float: right;
        }
        
        .u-icon-and,.u-icon-ios{
            background: url(../img/home/page1-icon.png) no-repeat;
            vertical-align: middle;
        }
        .u-icon-and{
            width: 26px;
            height: 31px;
            background-position: 0 0;
            margin: -10px 19px 0 23px;
        }
        .u-icon-ios{
            width: 24px;
            height: 28px;
            background-position: 0 -36px;
            margin: -10px 35px 0 25px;
        }
    }
    
    .m-player{
        width: 224px;
        height: 418px;
        background: url(../img/home/page1-bannerbg.png) no-repeat;
        position: absolute;
        right: 66px;
        top: 15%;

        @lst_w: 210px;
        @lst_h: 349px;
        ul{
            width: @lst_w;
            height: @lst_h;
            margin: 33px 0 0 7px;
            overflow: hidden;
        }
        img{
            width: @lst_w;
            height: @lst_h;
        }
        
        .z-show{
            display: block;
        }
        .z-hide{
            display: none;
        }
    }
    
    /*流程图*/
   .m-lst{
       position: absolute;
       top: 85%;
       
       li{
           height: 38px;
           float: left;
       }
       .m-circle{
           .m-c1,.m-c2,.m-c3,.m-c4{
                .create_circle(38px,#fff,1.5s);
            }
           p,span{
               font: normal 18px @YaHei;
               color: white;
               line-height: 38px;
               margin-left: 53px;
           }
       }
       .m-line{
           i{
               width: 80px;
               height: 2px;
               background-color: #fa9e8f;
               margin: 18px 20px 0;
           }
       }
   }
}

/*——————屏幕2——————*/
.m-page2{
    
    .m-page2-bg{
        @_len: 800px;
        width: @_len;
        height: @_len;
        position: absolute;
        top: 60%;
        left: 50%;
        margin-top: -(@_len/2);
        margin-left: -(@_len/2);
    }
    .m-say{
        .u-say1{
            @_w: 124px; @_h: 124px;
            width: @_w; height: @_h;
            position: absolute;
            top: 42%;
            left: 164px;
            margin-top: -(@_h/2);
            margin-left: -(@_w/2);
        }
        .u-say2{
            @_w: 121px; @_h: 132px;
            width: @_w; height: @_h;
            position: absolute;
            top: 22%;
            left: 366px;
            margin-top: -(@_h/2);
            margin-left: -(@_w/2);
        }
        .u-say3{
            @_w: 122px; @_h: 137px;
            width: @_w; height: @_h;
            position: absolute;
            top: 28%;
            right: 306px;
            margin-top: -(@_h/2);
            margin-left: -(@_w/2);
        }
        .u-say4{
            @_w: 124px; @_h: 122px;
            width: @_w; height: @_h;
            position: absolute;
            top: 48%;
            right: 122px;
            margin-top: -(@_h/2);
            margin-left: -(@_w/2);
        }
    }
    
    .m-man{
        @_w: 507px;
        @_h: 343px;
        width: @_w;
        height: @_h;
        position: absolute;
        top: 63%;
        left: 50%;
        margin-top: -(@_h/2);
        margin-left: -(@_w/2);
        
        .u-man{
            width: @_w;
            height: @_h;
        }
    }
}

/*——————屏幕3——————*/
.m-page3-bg{
    background: url(/front/www/img/home/page3-bg.png) no-repeat center;
    background-position: top;
}
.m-page3{
    
    /*标题*/
    .m-tt{
        @_w: 439px;
        @_h: 89px;
        width: @_w;
        height: @_h;
        text-align: center;
        position: absolute;
//      top: 12%;
        top: 18%;
        left: 50%;
        margin-left: -(@_w/2);
        .opacity(0);
        
        span,strong{
            color: white;
        }
        
        span{
            display: block;
            font: normal 26px @YaHei;
        }
        strong{
            font: normal 36px @YaHei;
            line-height: 1.5em;
        }
    }
    /*闹钟*/
    .m-clock{
        @_w: 993px;
        @_h: 480px;
        width: @_w;
        height: @_h;
        position: absolute;
        top: 62%;
        left: 50%;
        margin-top: -(@_h/2);
        margin-left: -(@_w/2);
        
        .u-clock{
            width: @_w;
            height: @_h;
        }
    }
    
    .m-icon{
        .u-icon1{
            @_w: 71px; @_h: 66px;
            width: @_w; height: @_h;
            position: absolute;
//          top: 67%;
//          left: 10px;
            top: 53%;
            left: 210px;
            .opacity(0);
        }
        .u-icon2{
            @_w: 80px; @_h: 79px;
            width: @_w; height: @_h;
            position: absolute;
//          top: 26%;
//          left: 120px;
            top: 36%;
            left: 220px;
            .opacity(0);
        }
        .u-icon3{
            @_w: 52px; @_h: 62px;
            width: @_w; height: @_h;
            position: absolute;
//          top: 33%;
//          right: 106px;
            top: 38%;
            right: 206px;
            .opacity(0);
        }
        .u-icon4{
            @_w: 74px; @_h: 58px;
            width: @_w; height: @_h;
            position: absolute;
//          top: 69%;
//          right: 6px;
            top: 75%;
            right: 106px;
            .opacity(0);
        }
    }
}

/*——————屏幕4——————*/
.m-page4{
    
    /*流程图*/
    .m-tab{
        width: 1000px;
        position: absolute;
        top: 15%;
        
        li{
            float: left;
            text-align: center;
            cursor: pointer;
        }
        span{
            font: normal 16px @YaHei;
            color: #ff755d;
        }
        
        /*圆图标li*/
        .m-circle{
            img{
                width: 139px;
                height: 139px;
                .opacity(60);
            }
            i{
                margin-bottom: 8px;
            }
        }
        /*箭头标li*/
        .m-arrows{
            margin: 40px 57px 0;
            
            img{
                width: 34px;
                height: 63px;
            }
        }
        
        .z-active{
            img{
                .opacity(100);
            }
        }
    }
    
    .m-step{
        width: 1000px;
        position: absolute;
        top: 45%;
        
        img{
            width: 1000px;
            height: 327px;
        }
        
        li{
            display: none;
        }
        .z-active{
            display: block;
        }
        
    }
}
/*——————屏幕5——————*/
.m-page5{
//  background-color: brown;
//  height: 545px;
    @_li_h: 100px;
    @_div_w: 70px;
    
    .m-tt{
        color: #f96046;
        font: normal 18px @YaHei;
        margin-bottom: 20px;
        position: absolute;
        top: 15%;
    }
    
    .m-lst{
//      background-color: wheat;
        width: 1050px;
        position: absolute;
        top: 20%;
        
        li{
            background-color: white;
            width: 300px;
            height: @_li_h;
            float: left;
            margin: 0 50px 22px 0;
        }
    }
    .m-pic,.m-info,.m-btn{
        width: @_div_w;
        height: @_div_w;
        margin-top: (@_li_h/2)-(@_div_w/2);
    }
    .m-pic{
        margin-left: 22px;
        float: left;
    }
    .m-info{
        margin-left: 17px;
        float: left;
        
        h4,span{
            font-size: 14px;
        }
        h4,span,strong{
            font-family: @YaHei;
        }
        h4{
            color: #545454;
            line-height: 1.5em;
            width: @_div_w;
        }
        strong{
            font-size: 10px;
            font-weight: normal;
            color: #a4a4a4;
            display: block;
            width: @_div_w;
        }
        span{
            color: #6e6e6e;
            display: block;
            width: @_div_w;
        }
        em{
            font-size: 24px;
            color: #fa7474;
        }
    }
    .m-btn{
        margin-right: 25px;
        float: right;
        
        a{
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        i{
            background: url(../img/home/page5-btn.png) no-repeat;
            width: 37px;
            height: 37px;
            margin: 5px auto 7px auto;
        }
        span{
            color: #8a8a8a;
            font: normal 12px @YaHei;
        }
    }
    
    /*分享模块*/
    .m-share{
//      width: 342px;
        position: absolute;
        top: 75%;
        left: 50%;
        margin-left: -170px;
        
        li,a{
            color: #484848;
            font: normal 14px @YaHei;
        }
        li{
            float: left;
            height: 28px;
            line-height: 28px;
            margin-right: 20px;
            padding: 15px 0;
        }
    }
}

/*遮罩弹窗二维码*/
   .m-page5-shade{
       display: none;
       width: 100%;
       height: 100%;
       background-color: #000000;
       .opacity(70);
       position: absolute;
       top: 0;
       left: 0;
       z-index: 100;
   }
   .m-page5-qr{
       display: none;
       width: 616px;
       height: 440px;
       background: url(../img/home/window_qr.png) no-repeat;
       z-index: 110;
       position: absolute;
       top: 50%;
       left: 50%;
       margin: -182px 0 0 -302px;
   }
   .m-page5-close{
       position: relative;
       .u-btn-close{
           position: absolute;
           top: 12px;
           right: 15px;
           width: 30px;
           height: 30px;
       }    
   }

/*IE兼容样式*/
.ie7,.ie8,.ie9{
    .m-page1{
         .m-c1,.m-c2,.m-c3,.m-c4{
             top: 0;
             background: url(../img/home/page1-circle.png) no-repeat;
             div{
                 display: none !important;
             }
         }
    }
}

